<!--介绍-->
<div id="q1" style="display: block;" class="know">
    <div class="wraper">
        <header id="scroll_pic_view" class="scroll_pic_view" style="overflow: hidden;">
            <div id="scroll_pic_view_div" style="width: 3840px; -webkit-transition: transform 0ms cubic-bezier(0.33, 0.66, 0.66, 1); transition: transform 0ms cubic-bezier(0.33, 0.66, 0.66, 1); -webkit-transform-origin: 0px 0px 0px; -webkit-transform: translate(0px, 0px) translateZ(0px); transform-origin: 0px 0px 0px; transform: translate(-1920px, 0px) scale(1) translateZ(0px);">
                <ul id="scroll_pic_view_ul">
                    <volist name="introduce.pic" id="pic_path">
                        <li style="width: 100%;">
                            <a onclick="return false;">
                                <img src="{$pic_path}">
                            </a>
                        </li>
                    </volist>
                </ul>
            </div>
            <div>
                <ol id="scroll_pic_nav" class="scroll_pic_nav">
                    <script>
                        (function (d, $) {
                            var scrollPicView = d.getElementById("scroll_pic_view"),
                                    scrollPicViewDiv = d.getElementById("scroll_pic_view_div"),
                                    lis = scrollPicViewDiv.querySelectorAll("li"),
                                    w = scrollPicView.offsetWidth,
                                    len = lis.length;
                            for (var i = 0; i < len; i++) {
                                lis[i].style.width = w + "px";
                                if (i == len - 1) {
                                    scrollPicViewDiv.style.width = w * len + "px";
                                }
                            }

                            var scroll_pic_view = new iScroll('scroll_pic_view', {
                                snap: true,
                                momentum: false,
                                hScrollbar: false,
                                useTransition: true,
                                onScrollEnd: function () {
                                    $("#scroll_pic_nav li").removeClass("on").eq(this.currPageX).addClass("on");
                                    //$("#scroll_pic_nav li.on").prev().addClass("left");
                                    //$("#scroll_pic_nav li.on").next().removeClass("left");	

                                    var list = $("#scroll_pic_nav li");
                                    for (var k = 0; k < list.length; k++) {
                                        if (k < this.currPageX)
                                            $(list[k]).addClass("left");
                                        else
                                            $(list[k]).removeClass("left");
                                    }
                                }
                            });
                            //
                            var nav_lis = new Array(lis.length);
                            d.write('<li class="on"><span></span></li>');
                            for (var i = 1; i < nav_lis.length; i++) {
                                d.write("<li><span></span></li>");
                            }
                        })(document, $);
                    </script>
                </ol>
            </div>
        </header>
    </div>
    <div class="knowInfo">
        <div>
            {$introduce.content}
        </div>
    </div>
</div>